<template>
  <div class="bg-white py--10">
    <div class="grid grid-cols-5 gap-2 px-3">
      <div
          v-for="category in categories"
          :key="category.id"
          class="flex flex-col items-center p-2 cursor-pointer"
          :class="{ 'text-primary-500': selectedCategoryId === category.id }"
          @click="handleClick(category.id)"
      >
        <div class="w-100 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-1">
          <img :src="category.icon" alt="" class="w-8 h-8 object-contain">
        </div>
        <span class="text-xs">{{ category.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  selectedCategoryId: {
    type: Number,
    default: null
  }
})

const emits = defineEmits(['category-click'])

const categories = ref([
  { id: 1, name: '美食', icon: './img/dcfl01.png' },
  { id: 2, name: '早餐', icon: './img/dcfl02.png' },
  { id: 3, name: '跑腿代购', icon: './img/dcfl01.png' },
  { id: 4, name: '汉堡披萨', icon: './img/dcfl04.png' },
  { id: 5, name: '甜品饮品', icon: './img/dcfl05.png' },
  { id: 6, name: '速食简餐', icon: './img/dcfl06.png' },
  { id: 7, name: '地方小吃', icon: './img/dcfl07.png' },
  { id: 8, name: '米粉面馆', icon: './img/dcfl08.png' },
  { id: 9, name: '包子粥铺', icon: './img/dcfl09.png' },
  { id: 10, name: '炸鸡炸串', icon: './img/dcfl10.png'}
])


const handleClick = (categoryId) => {
  emits('category-click', categoryId)
}
</script>